import { Col, Row, Typography } from 'antd';
import React from 'react';
import trim from 'lodash/trim';
import { formatJSON, formatXML } from '@/utils/utils';
import CodeEditor from '@/components/CodeEditor';

const { Text } = Typography;

function TransformTaskContent({ content }) {
  let { input = '', output = '' } = content;

  const inputFormat = trim(input).startsWith('<') ? 'xml' : 'json';
  const outputFormat = trim(output).startsWith('<') ? 'xml' : 'json';

  input = inputFormat === 'xml' ? formatXML(input) : formatJSON(input);
  output = outputFormat === 'xml' ? formatXML(output) : formatJSON(output);

  return (
    <Row gutter={16}>
      <Col span={12}>
        <div className="margin-bottom">
          <Text>输入报文：</Text>
        </div>
        <CodeEditor mode={inputFormat} readOnly data={input} height={550} />
      </Col>
      <Col span={12}>
        <div className="margin-bottom">
          <Text>输出报文：</Text>
        </div>
        <CodeEditor mode={outputFormat} readOnly data={output} height={550} />
      </Col>
    </Row>
  );
}

export default TransformTaskContent;
